(function ($)
{

    /**
     * 默认参数
     */
    let defaultOpts = {
        stage: document, //舞台
        item: 'resize-item', //可缩放的类名
    };

    /**
     * 定义类
     */
    let ZResize = function (options)
    {
        this.options = $.extend({}, defaultOpts, options);
        this.init();
    }

    ZResize.prototype = {

        init: function ()
        {
            this.initResizeBox();
        },
        /**
         *  初始化拖拽item
         */
        initResizeBox: function ()
        {
            let self = this;
            $(self.options.item).each(function ()
            {
                //创建面板
                let width = $(this).width();
                let height = $(this).height();
                let resizePanel = $('<div class="resize-panel"></div>');
                resizePanel.css({
                    width: width,
                    height: height,
                    top: 0,
                    left: 0,
                    position: 'absolute',
                    'background-color': 'transparent'
                });
                self.appendHandler(resizePanel, $(this));
                /**
                 * 创建控制点
                 */
                let n = $('<div class="n"></div>');//北
                let s = $('<div class="s"></div>');//南
                let w = $('<div class="w"></div>');//西
                let e = $('<div class="e"></div>');//东
                let ne = $('<div class="ne"></div>');//东北
                let nw = $('<div class="nw"></div>');//西北
                let se = $('<div class="se"></div>');//东南
                let sw = $('<div class="sw"></div>');//西南

                //添加公共样式
                self.addHandlerCss([n, s, w, e, ne, nw, se, sw]);
                //添加各自样式
                n.css({
                    'top': '-3px',
                    'margin-left': '-3px',
                    'left': '50%',
                    'cursor': 'n-resize'
                });
                s.css({
                    'bottom': '-3px',
                    'margin-left': '-3px',
                    'left': '50%',
                    'cursor': 's-resize'
                });
                e.css({
                    'top': '50%',
                    'margin-top': '-3px',
                    'right': '-3px',
                    'cursor': 'e-resize'
                });
                w.css({
                    'top': '50%',
                    'margin-top': '-3px',
                    'left': '-3px',
                    'cursor': 'w-resize'
                });
                ne.css({
                    'top': '-3px',
                    'right': '-3px',
                    'cursor': 'ne-resize'
                });
                nw.css({
                    top: '-3px',
                    'left': '-3px',
                    'cursor': 'nw-resize'
                });
                se.css({
                    'bottom': '-3px',
                    'right': '-3px',
                    'cursor': 'se-resize'
                });
                sw.css({
                    'bottom': '-3px',
                    'left': '-3px',
                    'cursor': 'sw-resize'
                });

                // 添加项目
                self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel);

                //绑定拖拽缩放事件
                self.bindResizeEvent(resizePanel, $(this));

            });
        },
        //控制点公共样式
        addHandlerCss: function (els)
        {
            for (let i = 0; i < els.length; i++)
            {
                el = els[i];
                el.css({
                    position: 'absolute',
                    width: '5px',
                    height: '5px',
                    background: '#ff0000',
                    margin: '0',
                });
            }
        },
        /**
         *  插入容器
         */
        appendHandler: function (handlers, target)
        {
            for (let i = 0; i < handlers.length; i++)
            {
                el = handlers[i];
                target.append(el);
            }
        },
        /**
         * 拖拽事件控制 包含8个缩放点  和一个拖拽位置
         */
        bindResizeEvent: function (el)
        {

            let self = this;
            let ox = 0; //原始事件x位置
            let oy = 0; //原始事件y位置
            let ow = 0; //原始宽度
            let oh = 0; //原始高度

            let oleft = 0; //原始元素位置
            let otop = 0;
            let org = el.parent('div');

            //东
            let emove = false;
            el.on('mousedown', '.e', function (e)
            {
                ox = e.pageX;//原始x位置
                ow = el.width();
                emove = true;
            });

            //南
            let smove = false;
            el.on('mousedown', '.s', function (e)
            {
                oy = e.pageY;//原始x位置
                oh = el.height();
                smove = true;
            });

            //西
            let wmove = false;
            el.on('mousedown', '.w', function (e)
            {
                ox = e.pageX;//原始x位置
                ow = el.width();
                wmove = true;
                oleft = parseInt(org.css('left').replace('px', ''));
            });

            //北
            let nmove = false;
            el.on('mousedown', '.n', function (e)
            {
                oy = e.pageY;//原始x位置
                oh = el.height();
                nmove = true;
                otop = parseInt(org.css('top').replace('px', ''));
            });

            //东北
            let nemove = false;
            el.on('mousedown', '.ne', function (e)
            {
                ox = e.pageX;//原始x位置
                oy = e.pageY;
                ow = el.width();
                oh = el.height();
                nemove = true;
                otop = parseInt(org.css('top').replace('px', ''));
            });

            //西北
            let nwmove = false;
            el.on('mousedown', '.nw', function (e)
            {
                ox = e.pageX;//原始x位置
                oy = e.pageY;
                ow = el.width();
                oh = el.height();
                otop = parseInt(org.css('top').replace('px', ''));
                oleft = parseInt(org.css('left').replace('px', ''));
                nwmove = true;
            });

            //东南
            let semove = false;
            el.on('mousedown', '.se', function (e)
            {
                ox = e.pageX;//原始x位置
                oy = e.pageY;
                ow = el.width();
                oh = el.height();
                semove = true;
            });

            //西南
            let swmove = false;
            el.on('mousedown', '.sw', function (e)
            {
                ox = e.pageX;//原始x位置
                oy = e.pageY;
                ow = el.width();
                oh = el.height();
                swmove = true;
                oleft = parseInt(org.css('left').replace('px', ''));
            });

            //拖拽
            let drag = false;
            el.on('mousedown', function (e)
            {
                ox = e.pageX;//原始x位置
                oy = e.pageY;
                otop = parseInt(org.css('top').replace('px', ''));
                oleft = parseInt(org.css('left').replace('px', ''));
                drag = true;
                $(".resize-panel").css("cursor", "move");
            });
            $(self.options.stage).on('mousemove', function (e)
            {
                if (emove)
                {
                    let x = (e.pageX - ox);
                    el.css({
                        width: ow + x
                    });
                    org.css({
                        width: ow + x
                    });
                } else if (smove)
                {
                    let y = (e.pageY - oy);
                    el.css({
                        height: oh + y
                    });
                    org.css({
                        height: oh + y
                    });
                } else if (wmove)
                {
                    let x = (e.pageX - ox);
                    el.css({
                        width: ow - x,
                        // left: oleft + x
                    });
                    org.css({
                        width: ow - x,
                        left: oleft + x
                    });
                } else if (nmove)
                {
                    let y = (e.pageY - oy);
                    el.css({
                        height: oh - y,
                        // top: otop + y
                    });
                    org.css({
                        height: oh - y,
                        top: otop + y
                    });
                } else if (nemove)
                {
                    let x = e.pageX - ox;
                    let y = e.pageY - oy;
                    el.css({
                        height: oh - y,
                        // top: otop + y,
                        width: ow + x
                    });
                    org.css({
                        height: oh - y,
                        top: otop + y,
                        width: ow + x
                    });
                } else if (nwmove)
                {
                    let x = e.pageX - ox;
                    let y = e.pageY - oy;
                    el.css({
                        height: oh - y,
                        // top: otop + y,
                        width: ow - x,
                        // left: oleft + x
                    });
                    org.css({
                        height: oh - y,
                        top: otop + y,
                        width: ow - x,
                        left: oleft + x
                    });
                } else if (semove)
                {
                    let x = e.pageX - ox;
                    let y = e.pageY - oy;
                    el.css({
                        width: ow + x,
                        height: oh + y
                    });
                    org.css({
                        width: ow + x,
                        height: oh + y
                    });
                } else if (swmove)
                {
                    let x = e.pageX - ox;
                    let y = e.pageY - oy;
                    el.css({
                        width: ow - x,
                        // left: oleft + x,
                        height: oh + y
                    });
                    org.css({
                        width: ow - x,
                        left: oleft + x,
                        height: oh + y
                    });
                } else if (drag)
                {
                    let x = e.pageX - ox;
                    let y = e.pageY - oy;
                    // 最终top和left值
                    let fleft = oleft + x;
                    let ftop = otop + y;
                    // 父级窗体宽高
                    let orgWidth = parseFloat(org.parent().css("width").replace("px", ""));
                    let orgHeight = parseFloat(org.parent().css("height").replace("px", ""));
                    let thisWidth = parseFloat(org.css("width").replace("px", ""));
                    let thisHeight = parseFloat(org.css("height").replace("px", ""));
                    // 求差
                    let diffx = orgWidth - thisWidth;
                    let diffy = orgHeight - thisHeight;
                    // 左上角
                    if (fleft <= 0 && ftop <= 0)
                    {
                        fleft = 0;
                        ftop = 0;
                    }
                    // 右下角
                    if (fleft >= diffx && ftop >= diffy)
                    {
                        fleft = diffx;
                        ftop = diffy;
                    }
                    // 左下角
                    if (fleft <= 0 && ftop >= diffy)
                    {
                        fleft = 0;
                        ftop = diffy;
                    }
                    // 右上角
                    if (fleft >= diffx && ftop <= 0)
                    {
                        fleft = diffx;
                        ftop = 0;
                    }
                    // 左边
                    if (fleft <= 0 && (ftop >= 0 && ftop <= diffy))
                    {
                        fleft = 0;
                    }
                    // 右边
                    if (fleft >= diffx && (ftop >= 0 && ftop <= diffy))
                    {
                        fleft = diffx;
                    }
                    // 上边
                    if ((fleft >= 0 && fleft <= diffx) && ftop <= 0)
                    {
                        ftop = 0;
                    }
                    // 下边
                    if ((fleft >= 0 && fleft <= diffx) && ftop >= diffy)
                    {
                        ftop = diffy;
                    }
                    org.css({
                        left: fleft,
                        top: ftop
                    });
                }
            }).on('mouseup', function (e)
            {
                emove = false;
                smove = false;
                wmove = false;
                nmove = false;
                nemove = false;
                nwmove = false;
                swmove = false;
                semove = false;
                drag = false;
                $(".resize-panel").css("cursor", "default");
            });
        },
    }

    /**
     * 截屏操作，且支持缩放
     * @type {ZResize}
     */
    window.ZResize = ZResize;

})(jQuery);
